<template>
  <el-dialog
    @close="cancel"
    :before-close="cancel"
    :title="title"
    :visible.sync="open"
    width="800px"
    append-to-body
  >
    <el-form :rules="rules" class="hang" ref="form" :model="form" label-width="200px">
      <el-row>
        <el-col :span="16">
          <el-form-item label="投诉类型" prop="type">
            <el-radio-group v-model="form.label">
              <el-radio
                v-for="item in type"
                :key="item.label"
                :label="item.label"
                @change="changeType(item.name)"
                >{{ item.name }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="细分类型" prop="thinType">
            <el-radio-group v-model="form.labelType">
              <el-radio
                v-for="item in thinType"
                :key="item.labelType"
                :label="item.labelType"
                @change="changeThinType(item.name)"
              >
                {{ item.name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-col :span="20">
          <el-form-item label="投诉内容" prop="content">
            <el-input
              type="textarea"
              v-model="form.content"
              placeholder="如果您对我们服务感到不满意，请告诉我们，我们将认真听取您的反馈并及时改正"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="15" :style="{ textAlign: 'right' }">
          <el-button type="primary" @click="submit">提 交</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { addComplain } from "@/api/system/order/index";
export default {
  props: {
    open: Boolean,
    title: String,
    id: Number,
  },
  name: "Complaint",
  data() {
    return {
      form: {},
      type: [
        {
          label: 1,
          name: "投诉服务",
        },
        {
          label: 2,
          name: "需求建议",
        },
        {
          label: 3,
          name: "其他",
        },
      ],
      thinType: [
        {
          labelType: 1,
          name: "服务态度",
        },
        {
          labelType: 2,
          name: "回复慢",
        },
        {
          labelType: 3,
          name: "问题未解决",
        },
        {
          labelType: 4,
          name: "业务能力",
        },
      ],
      rules: {
        type: [{ required: true, message: "投诉内容不能为空", trigger: "blur" }],
        thinType: [{ required: true, message: "投诉内容不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    changeThinType(e) {
      this.form.thinType = e;
    },
    changeType(e){
      this.form.type = e;
    },
    submit() {
      let params = {
        workOrderId: this.id,
        type:this.form.type,
        thinType:this.form.thinType,
        content:this.form.content,
      };
      addComplain(params).then(res=>{
        console.log(res);
        if (res.code==200) {
          this.$confirm(
        `投诉成功,我们将认真听取您的反馈并及时改正`,
        "提示",
        {
          confirmButtonText: "继续提交工单",
          cancelButtonText: "返回",
          type: "warning",
        }
      )
        .then(() => {
          this.$emit("close");
          this.form={};
        })
        .catch(() => {
          this.$emit("close");
        });
        }
      })
    },
    cancel() {
      this.$emit("close");
      this.form={};
    },
  },
};
</script>

<style></style>
